<template>
	<view>
		<!-- 轮播图 -->
		<view class="pt26 auto" style="width: 690rpx;">
			<u-swiper :list="list" height="294"></u-swiper>
		</view>
		<!-- 轮播图结束 -->
		<view class="mt40 ml30 fs38 fw600" style="color: #260E03;">收益计算</view>
		<view
			style="width: 690rpx;height: 432rpx;background-color: #fff;border-radius: 30rpx;"
			class="auto mt20 "
		>
			<!-- 输入对应收益率（%） -->
			<view class="textc fs32 pt38" style="color: #260E03;">输入对应收益率（%）</view>
			<view class="ipt-one auto mt20">
				<u-field
					v-model.number="value"
					placeholder="0"
					inputAlign="center"
					:clearable="false"
					placeholderStyle="color:#A6A7A9;fontSize:39rpx;fontWeight:bold"
					:fieldStyle="{ width: '100%' }"
					@blur="blur"
				></u-field>
			</view>
			<!-- 输入对应收益率（%） -->
			<!-- 选择项目周期 -->
			<view class="textc mt38 fs32" style="color: #260E03;">选择项目周期</view>
			<view class="ipt-two auto mt20">
				<u-input
					v-model="value1"
					type="select"
					@click="show = true"
					placeholder="0"
					placeholderStyle="color:#A6A7A9;fontSize:39rpx;fontWeight:bold"
				/>

				<u-action-sheet :list="dateList" v-model="show" @click="handerSelect"></u-action-sheet>

				<u-icon name="arrow-down" color="#999999" size="28" @click="show = true"></u-icon>
			</view>
			<!-- 选择项目周期 -->
		</view>
		<view class="box auto mt30">
			<view class="pt38 textc fs32" style="color: #260E03;">请输入认购金额</view>
			<view class="ipt-one auto mt20">
				<u-field
					v-model="value2"
					placeholder="请输入认购金额"
					inputAlign="center"
					:clearable="false"
					placeholderStyle="color:#A6A7A9;fontSize:39rpx;fontWeight:bold"
					:fieldStyle="{ width: '100%' }"
					@blur="blur"
				></u-field>
			</view>
			<view class="pt38 textc fs32" style="color: #260E03;">您的收益大约为</view>
			<view class="money-box textc auto mt20 fs40 fw900">{{ syNum }}</view>
		</view>
		<view class="dflex jcc fs26 mt30">
			<view style="color: #E83E28;">*</view>
			<view style="color: #767677;">市场有风险，投资需谨慎</view>
		</view>
		<!-- 按钮 -->
		<view class="btn white fs32 fw900 textc auto mt38" @click="handerSub">快速预约</view>
		<!-- 联系我们 -->
		<view class="textc fs32 mt58" style="color: #260E03;padding-bottom: 87rpx;">联系我们</view>
	</view>
</template>

<script setup>
import { getZq, getJisuan } from '@/utils/api.js';

import { ref,onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
let dateId = ref();
let value = ref(); //收益率
let value1 = ref(); //选择的周期
let value2 = ref(); //认购金额
let show = ref(false);
let syNum = ref(0);
let list = [
	{
		image: '/static/money-img.png'
	},
	{
		image: '/static/money-img.png'
	},
	{
		image: '/static/money-img.png'
	},
	{
		image: '/static/money-img.png'
	},
	{
		image: '/static/money-img.png'
	}
];
//跳转到预约
const handerSub = () => {
	uni.navigateTo({
		url: '/pages/SubscriptionReservation/SubscriptionReservation'
	});
};
let dateList = ref([]);
const getDate = () => {
	getZq().then(res => {
		dateList.value = res.data;
		return dateList.value.map(el => (el.text = el.value));
	});
};

let handerSelect = index => {
	dateId.value = index + 1;
	value1.value = dateList.value[index].text;
	show.value = false;
	getJi(dateId.value);
};
const getJi = () => {
	let data = {
		syl: value.value,
		money: value2.value,
		zq: dateId.value
	};
	getJisuan(data).then(res => {
		console.log(res);
		syNum.value = res.data.sy;
	});
};
const blur = () => {
	getJi();
};
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
	getDate();
	getJi();
});
</script>

<style scoped lang="scss">
page {
	background: linear-gradient(360deg, #f5f6fa 0%, #ffffff 100%);
}
.ipt-one {
	width: 594rpx;
	height: 88rpx;
	border-radius: 15rpx;
}
:deep(.u-field-inner) {
	display: block;
}
:deep(.u-field) {
	background: #f5f6fa;
	border-radius: 15rpx;
}
.ipt-two {
	width: 594rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #f5f6fa;
	display: flex;
	align-items: center;
	padding-left: 65rpx;
	border-radius: 15rpx;
}
.u-input {
	display: flex;
	align-items: center;
	border-radius: 15rpx;
	padding: 0;
	text-align: center !important;
	background: #f5f6fa;
}
:deep(.uicon-arrow-down-fill) {
	display: none;
}
:deep(.uicon-arrow-down) {
	margin-right: 33rpx;
}
.box {
	width: 690rpx;
	height: 432rpx;
	background: #fff;
	border-radius: 30rpx;
}
.money-box {
	width: 594rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #ffe6e0;
	border-radius: 15rpx;
	color: #e83e28;
}
.btn {
	width: 594rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
	border-radius: 15rpx;
}
</style>
